<!--
 @description 分厂(各类型)产量近30日趋势(套)
 @fileName MonthChart.vue
 @author zengqiongying
 @created 2021/09/28 17:26:05
-->
<template>
  <div>
    <div :id="chartId" ref="myEchart" class="echart_container" />
  </div>
</template>

<script>
import ChartLineMixin from '@/mixins/ChartLine'
import { parseTime } from '@/utils'
import { getCustomizedComplete30Day } from '@/apis/produces'
export default {
  name: 'CustomizedMonthChart',
  mixins: [ChartLineMixin],
  props: {
    isDefault: {
      type: Number,
      default: 0
    },
    selectDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }, // 日期
    factoryName: {
      type: String,
      default: ''
    } // 工厂类型
  },
  data() {
    return {
      legendData: ['产量'], // 图列数据
      xAxisFullData: [], // x轴日期对应的完整日期
      activeIndex: -1,
      activeDate: ''
    }
  },
  watch: {
    selectDate(val, oldVal) {
      this.drawChart()
    },
    factoryName(val, oldVal) {
      this.drawChart()
    }
  },
  created() {
    // const day = new Date().getDate()
    const xAxis = this.echartOption.xAxis
    xAxis.axisLabel.showMinLabel = true
    xAxis.axisLabel.showMaxLabel = true
    xAxis.axisLabel.interval = 1// day < 16 ? 0 : 1
    xAxis.axisLabel.rotate = 40 // X轴字体倾斜40度
    xAxis.axisLabel.fontSize = 10 // 字体大小
    this.$set(this.echartOption, 'xAxis', xAxis)
    const grid = this.echartOption.grid
    grid.left = 15
    grid.right = 10
    grid.top = 10
    this.$set(this.echartOption, 'grid', grid)
    this.echartOption.legend.show = false
    this.echartOption.series.forEach(item => {
      item.symbolSize = 4
      item.showSymbol = true
      item.lineStyle.width = 2
    })
  },
  methods: {
    async getChartData() {
      const xAxisData = []
      const dayData = []
      this.xAxisFullData = []
      /* for (let i = 1; i <= 31; i++) {
        xAxisData.push(`06.${i < 10 ? '0' + i : i}`)
        dayData.push(this.getRandom(i, 500))
      } */
      const params = {
        date: this.selectDate,
        factoryName: this.factoryName
      }
      await getCustomizedComplete30Day(params).then(res => {
        if (res.data && res.data.length) {
          res.data.forEach(v => {
            this.xAxisFullData.push(parseTime(v.date, '{y}-{m}-{d}'))
            xAxisData.push(parseTime(v.date, '{m}.{d}'))
            dayData.push(Number(v.completedQuantity || 0))
          })
        }
      })
      this.chart.chartData = {
        xAxisData,
        seriesData: [dayData]
      }
      /* let xIndex = this.activeIndex === -1 ? xAxisData.length - 1 : this.activeIndex
      if (!xAxisData[xIndex]) {
        xIndex = xAxisData.length - 1
      } */
      if (!this.isDefault) {
        this.activeIndex = -1
        this.activeDate = ''
        const xIndex = xAxisData.length - 1
        this.getxAxisSelectData(xIndex, 1)
        return
      }
      if (!this.activeDate) {
        const xIndex = xAxisData.length - 1
        this.getxAxisSelectData(xIndex)
      } else {
        this.activeIndex = this.xAxisFullData.findIndex(v => v === this.activeDate)
      }
    },
    getRandom(min, max) {
      return Math.floor(Math.random() * (max - min)) + min
    },
    // 获取当前高亮对应的x轴值
    getxAxisSelectData(xIndex) {
      const xValue = this.xAxisFullData[xIndex] || ''
      this.activeIndex = xIndex
      this.activeDate = xValue
      this.$emit('get-complete-date', xValue)
    }
  }
}

</script>
<style lang='less' scoped>
  .echart_container{
    height:260px
  }
</style>
